@use '../config';
@use './util';

/* - Animation 动画 -
************************* */

// Transition Property
@if util.expect(config.$abbr-transition-property) {

  @each $key, $value in util.map-handler(config.$map-transitionProperty) {

    #{util.class-generator(config.$abbr-transition-property, $key)}
    {
      transition-property: $value;

      @if ($key != 'none') {
        transition-timing-function: map-get($map: config.$map-transitionTimingFunction, $key: DEFAULT);
        transition-duration: map-get($map: config.$map-transitionDuration, $key: DEFAULT);
      }
    }

  }

}

// Transition Duration
@if util.expect(config.$abbr-transition-duration) {

  @each $key, $value in util.map-handler(config.$map-transitionDuration) {

    #{util.class-generator(config.$abbr-transition-duration, $key)}
    {
      transition-duration: $value;
    }

  }

}

// Transition Timing Function
@if util.expect(config.$abbr-transition-timing-function) {

  @each $key, $value in util.map-handler(config.$map-transitionTimingFunction) {

    #{util.class-generator(config.$abbr-transition-timing-function, $key)}
    {
      transition-timing-function: $value;
    }

  }

}

// Transition Delay
@if util.expect(config.$abbr-transition-delay) {

  @each $key, $value in util.map-handler(config.$map-transitionDelay) {

    #{util.class-generator(config.$abbr-transition-delay, $key)} {
      transition-delay: $value;
    }

  }

}

// Animate
@if util.expect(config.$abbr-animation) {

  @each $key, $value in util.map-handler(config.$map-animation) {

    #{util.class-generator(config.$abbr-animation, $key)} {
      animation: $value;
    }

  }

}

// Transform
@if util.expect(config.$abbr-transform) {

  #{util.class-generator(config.$abbr-transform)} {
    --translate-x: 0;
    --translate-y: 0;
    --rotate: 0;
    --skew-x: 0;
    --skew-y: 0;
    --scale-x: 1;
    --scale-y: 1;
    transform: translateX(var(--translate-x)) translateY(var(--translate-y)) rotate(var(--rotate)) skewX(var(--skew-x)) skewY(var(--skew-y)) scaleX(var(--scale-x)) scaleY(var(--scale-y));
  }

  #{util.class-generator(config.$abbr-transform, gpu)} {
    --translate-x: 0;
    --translate-y: 0;
    --rotate: 0;
    --skew-x: 0;
    --skew-y: 0;
    --scale-x: 1;
    --scale-y: 1;
    transform: translate3d(var(--translate-x), var(--translate-y), 0) rotate(var(--rotate)) skewX(var(--skew-x)) skewY(var(--skew-y)) scaleX(var(--scale-x)) scaleY(var(--scale-y));
  }

}

// Transform Origin
@if util.expect(config.$abbr-transform-origin) {

  @each $key, $value in util.map-handler(config.$map-transformOrigin) {

    #{util.class-generator(config.$abbr-transform-origin, $key)} {
      transform-origin: $value;
    }

  }

}

// Scale
@if util.expect(config.$abbr-scale) {

  @each $outer-key, $outer-value in util.map-handler(config.$map-scale) {

    @each $inner-value in ('', x, y) {

      #{util.class-generator(config.$abbr-scale, $inner-value, $outer-key)} {

        @if $inner-value == '' {
          --scale-x: #{$outer-value};
          --scale-y: #{$outer-value};
        }
        @else {
          #{'--scale-'}#{$inner-value}: #{$outer-value};
        }

      }

    }

  }

}

// Rotate
@if util.expect(config.$abbr-rotate) {

  @each $key, $value in util.map-handler(config.$map-rotate) {

    #{util.class-generator(config.$abbr-rotate, $key)} {
      --rotate: #{$value};
    }

    #{util.class-generator('-', config.$abbr-rotate, $key)} {
      --rotate: #{'-'}#{$value};
    }
  }

}

// Translate
@if util.expect(config.$abbr-translate) {

  @each $outer-key, $outer-value in util.map-handler(config.$map-translate) {

    @each $inner-value in (x, y) {

      #{util.class-generator(config.$abbr-translate, $inner-value, $outer-key)} {
        #{'--translate-'}#{$inner-value}: #{$outer-value};
      }

      #{util.class-generator('-', config.$abbr-translate, $inner-value, $outer-key)} {
        #{'--translate-'}#{$inner-value}: #{'-'}#{$outer-value};
      }

    }

  }

}

// Skew
@if util.expect(config.$abbr-skew) {

  @each $outer-key, $outer-value in util.map-handler(config.$map-skew) {

    @each $inner-value in (x, y) {

      #{util.class-generator(config.$abbr-skew, $inner-value, $outer-key)} {
        #{'--skew-'}#{$inner-value}: #{$outer-value};
      }

      #{util.class-generator('-', config.$abbr-skew, $inner-value, $outer-key)} {
        #{'--skew-'}#{$inner-value}: #{'-'}#{$outer-value};
      }

    }

  }

}

// @keyframes
@if util.expect(config.$abbr-animation) {

  @each $key, $value in util.map-handler(config.$map-animation) {

    @if $key != none {

      @keyframes #{$key} {

        @if $key == spin {
          from {
            transform: rotate(0deg);
          }

          to {
            transform: rotate(360deg);
          }
        }
        @else if $key == ping {
          75%, 100% {
            transform: scale(2);
            opacity: 0;
          }
        }
        @else if $key == pulse {
          0%, 100% {
            opacity: 1;
          }
          50% {
            opacity: .5;
          }
        }
        @else if $key == bounce {
          0%, 100% {
            transform: translateY(-25%);
            animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
          }
          50% {
            transform: translateY(0);
            animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
          }
        }

      }

    }

  }

}

